<template>
    <a-card :bordered="false">
        <a-row :gutter="[20, 20]">
            <a-col :span="4">
                <LTree ref="typeTree" :treeData="treeData" @onSelect="onSelect"></LTree>
            </a-col>
            <a-col :span="20">
                <div class="table-operator" v-if="typeCode">
                    <a-button shape="round" size="small" type="primary" icon="plus"
                        @click="handleEdit({menuId:typeCode}, 'ipcMenulookForm', '新增')">添加</a-button>
                </div>
                <LTable ref="ipcMenuList" size="middle" rowKey="keyId" :columns="columns" :initQuery="initQuery"
                    axiosUrl="/WxIpcMenuListController/page" :formAttributes="formAttributes" :showPagination="true"
                    :showQueryForm="true" :initOrder="initOrder" :isAutoLoad="false">
                    <span slot="action" slot-scope="text, record">
                        <a @click="handleEdit(record, 'ipcMenulookForm', '详情')">详情</a>
                        <a-divider type="vertical" />
                        <a @click="handleEdit(record, 'ipcOnlyofficeEditForm', '编辑文档')">编辑文档</a>
                        <a-divider type="vertical" />
                        <a @click="handleEdit(record, 'ipcMenuVideoForm', '编辑视频')">编辑视频</a>
                        <a-divider type="vertical" />
                        <a-popconfirm title="确定删除吗?"
                            @confirm="() => handleDelete({ keyId: record.keyId }, '/WxIpcMenuListController/del', 'ipcMenuList')">
                            <a>删除</a>
                        </a-popconfirm>
                    </span>
                </LTable>
                <ipcMenulookForm ref="ipcMenulookForm" @close="refresh('ipcMenuList')" @ok="refresh('ipcMenuList')">
                </ipcMenulookForm>
                <ipcOnlyofficeEditForm ref="ipcOnlyofficeEditForm" @close="refresh('ipcMenuList')" @ok="refresh('ipcMenuList')">
                </ipcOnlyofficeEditForm>
                <ipcMenuVideoForm ref="ipcMenuVideoForm" @close="refresh('ipcMenuList')" @ok="refresh('ipcMenuList')">
                </ipcMenuVideoForm>
            </a-col>
        </a-row>
    </a-card>
</template>

<script>
import LTree from '@/components/lt/LTree'
import request from '@/utils/request'
import LTable from '@/components/lt/LTable'
import { getDictInfo } from '@/api/dict'
import defaultSettings from '@/config/defaultSettings'
import { filterDictText } from '@/utils/util'
import ipcMenulookForm from './ipcMenulookForm'
import ipcMenuVideoForm from './ipcMenuVideoForm'

import ipcOnlyofficeEditForm from './ipcOnlyofficeEditForm'
import {SysMixin} from '@/mixins/SysMixin'
export default {
    name: 'ipcMenulookList',
    components: {
        LTree, LTable, ipcMenulookForm,ipcOnlyofficeEditForm,ipcMenuVideoForm
    },
    mixins:[SysMixin],
    data() {
        return {
            defaultSettings,
            treeData: [],
            typeCode: null,
            initQuery: [],
            initOrder: [{ field: 'createTime', val: 'desc' }],
            formAttributes: [
            ],
            columns: [
                {

                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                // {
                //     title: '类型',
                //     dataIndex: 'ipcType',
                // },
                {
                    title: '名称',
                    dataIndex: 'fileName',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: '300px',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            isAutoLoad: false,
            width: document.documentElement.clientWidth,
            model: '',
            confirmLoading: false,
            title: '',
        }
    },
    methods: {
        queryType() {
            let that = this
            request({ url: '/WxIpcMenuController/queryIpcMenuTreeSelect', method: 'post' }).then((res) => {
                if (res.success) {
                    this.treeData = res.result
                } else {
                    that.$message.warning(res.message);
                }
            })
        },
        onSelect(node) {
            this.typeCode = node.key
            this.initQuery = [{ field: 'menuId', val: node.key }]
            this.$nextTick(() => {
                this.$refs['ipcMenuList'].searchQuery()
            })
        },
    },
    mounted() {
        this.$nextTick(() => {
            //展开所有
            this.$refs.typeTree.expandAll()
        })
    },
    created() {
        this.queryType()
    }
}
</script>
<style  scoped lang="less">
.drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 16px;
    left: 0;
    text-align: right;
    border-top: 1px solid var(--component-border-color) !important;
    background: var(--drawer-header-background-color) !important;
    border-radius: 0 0 2px 2px;
    z-index: 999999;
}

.qualityManual-container {
    padding: 0 !important;
    width: 100%;
    height: calc(100vh - 50px);
}

.qualityManual-container-office {
    width: 100%;
    height: calc(100% - 55px);
}
</style>